<template>
  <div class="article-view">
    <TopTitle name="博客文章" :is-search="true" class="article-view__header" @search="search" />

    <div class="article-view__filters" v-show="!query">
      <subsetView :classify="0" @nowSubset="nowSelect" />
    </div>

    <div class="article-view__content">
      <articleComponent class="article-view__main" :state="nowState" :subsetId="nowSubset" :serchTerm="serchTerm">
      </articleComponent>

      <div class="article-view__sidebar">
        <labelView></labelView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TopTitle from '@/components/bar/TopTitle.vue';
import subsetView from '@/components/subset/subsetView.vue';
import labelView from '@/components/label/labelView.vue';
import articleComponent from '@/components/article/articleComponent.vue';

import { ref } from 'vue';

const nowState = ref<number | string>(-1); // 当前状态
const nowSubset = ref<number | string>(-1); // 当前分组ID

const nowSelect = (e: { id: number | string; type: string }) => {
  if (e.type === 'state') {
    nowState.value = e.id;
    nowSubset.value = -1;
  } else if (e.type === 'all') {
    nowState.value = -1;
    nowSubset.value = -1;
  } else if (e.type === 'subset' || e.type === 'exclude') {
    nowSubset.value = e.id;
    nowState.value = -1;
  }
}

// 搜索
const serchTerm = ref<string>('')
const query = ref<boolean>(false)
const search = (e: string) => {
  serchTerm.value = e
  if (e) {
    query.value = true
  } else {
    query.value = false
  }
}
</script>

<style scoped lang="less">
// 颜色变量
@primary-color: #3a7bd5;
@primary-light: rgba(58, 123, 213, 0.05);
@text-color: #2c3e50;
@text-light: #5e6c84;
@bg-color: #ffffff;
@bg-light: #f8fafd;
@border-color: #e8ecf1;
@shadow-color: rgba(0, 0, 0, 0.06);
@container-width: 1280px;
@transition-time: 0.3s;
@transition-ease: cubic-bezier(0.25, 1, 0.5, 1);

// 主容器
.article-view {
  width: 100%;
  max-width: @container-width;
  margin: 0 auto;
  padding: 0 24px;

  // 顶部标题区域
  &__header {
    margin-bottom: 24px;
    padding-bottom: 4px;
  }

  // 筛选器区域
  &__filters {
    margin-bottom: 32px;
    animation: fadeInDown 0.5s @transition-ease;
  }

  // 内容区域
  &__content {
    display: flex;
    gap: 28px;
    margin-bottom: 48px;
    position: relative;

    // 主要内容
    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 72%;
      width: 1px;
      background: linear-gradient(to bottom,
          transparent,
          @border-color 15%,
          @border-color 85%,
          transparent);
      opacity: 0.5;
    }
  }

  // 主要文章列表
  &__main {
    flex: 1;
    min-width: 0; // 防止flex子项溢出
    animation: fadeIn 0.6s @transition-ease;
  }

  // 侧边栏
  &__sidebar {
    width: 28%;
    max-width: 320px;
    padding-left: 24px;
    animation: fadeInRight 0.7s @transition-ease;
  }
}

// 动画
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 响应式布局
@media (max-width: 1200px) {
  .article-view {
    padding: 0 20px;

    &__content {
      gap: 24px;
    }

    &__sidebar {
      width: 30%;
      padding-left: 20px;
    }

    &__content:before {
      left: 70%;
    }
  }
}

@media (max-width: 992px) {
  .article-view {
    &__content {
      gap: 20px;
    }

    &__sidebar {
      width: 34%;
      padding-left: 16px;
    }

    &__content:before {
      left: 66%;
    }

    &__filters {
      margin-bottom: 24px;
    }
  }
}

@media (max-width: 768px) {
  .article-view {
    padding: 0 16px;

    &__content {
      flex-direction: column;
      gap: 32px;
    }

    &__sidebar {
      width: 100%;
      max-width: none;
      padding-left: 0;
      padding-top: 28px;
      border-top: 1px solid @border-color;
    }

    &__content:before {
      display: none;
    }

    &__header {
      margin-bottom: 16px;
    }

    &__filters {
      margin-bottom: 20px;
    }
  }
}

@media (max-width: 576px) {
  .article-view {
    padding: 0 12px;

    &__content {
      gap: 24px;
      margin-bottom: 32px;
    }

    &__sidebar {
      padding-top: 20px;
    }

    &__header {
      margin-bottom: 12px;
    }

    &__filters {
      margin-bottom: 16px;
    }
  }
}

@media (max-width: 480px) {
  .article-view {
    padding: 0 10px;

    &__content {
      gap: 20px;
    }

    &__sidebar {
      padding-top: 16px;
    }
  }
}
</style>
